<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	#import {
		position: relative;
		top: 1.4px;
	}
	.work-div {
		width: 200px;
		height: 3.5vh;
		background-color: #448FB9;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	#work-calendar {
		width: 200px;
		text-align: center;
	}
	.div-date-picker {
		position: relative;
	}
	#date-picker {
		width: 168px;
		padding-left: 30px;
	}
	.div-date-picker .fa-calendar{
		position: absolute;
		left: 8px;
		top: 9px;
	}
</style>
<div class="page-header">
	<h1>
		健康信息
		<small>
			<a href="javascript:;" target="_blank" class="export blue ml10">
				<i class="ace-icon fa fa-download"></i> 导出
			</a>
		</small>
	</h1>
</div>
<div class="col-xs-12 content-filter">
	<!-- 筛选 -->
	<div class="widget-box">
		<div class="widget-header">
			<h4 class="widget-title">内容筛选</h4>
			<div class="widget-toolbar">
				<a href="#" data-action="collapse">
					<i class="ace-icon fa fa-chevron-up"></i>
				</a>
				<a href="#" data-action="close">
					<i class="ace-icon fa fa-times"></i>
				</a>
			</div>
		</div>
		<div class="widget-body">
			<div class="widget-main">
				<div class="form-inline" id="data-search">
					<div class="form-inline keyword-search-div">
						<label class="keyword-search-label">名称&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<div class="keyword-search-box">
							<div class="div-search">
								<input style="float:left;height:30px;width:180px;border:1px solid #669FC7;padding:0 30px 0 14px;border-radius:10px 0 0 10px !important;-moz-border-radius:10px 0 0 10px;" type="text" name="realname" placeholder="搜索用户名称..." autocomplete="off">
								<span id="empty-search" style="position:relative;right:64px;cursor:pointer;display:none;">×</span>
								<button id="btn-search" class="btn-search" style="outline:none;float:left;height:30px;width:44px;border:1px solid #669FC7;background-color:#669FC7;border:0;border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;">
									<i class="ace-icon fa fa-search nav-search-icon white"></i>
								</button>
							</div>
						</div>
					</div>
					<div class="form-inline keyword-search-div" id="div-bindusertype">
						<label class="keyword-search-label">权限&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<div class="keyword-search-box">
							<a href="javascript:;" class="keyword-search-keyword active" data-id="">全部</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?= BIND_TYPE_STUDENT ?>">学生</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?= BIND_TYPE_TEACHER ?>">教师</a>
						</div>
					</div>
					<!-- 管理员权限 -->
					<?php if($rmxUser['user_type'] == USER_TYPE_SCHOOL): ?>
						<div class="form-inline keyword-search-div" id="div-grade">
							<label class="keyword-search-label">年级&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="keyword-search-box">
								<a href="javascript:;" class="keyword-search-keyword keyword-search-grade active" data-id="">全部</a>
								<?php if(isset($gradeList)): ?>
									<?php foreach($gradeList as $grade): ?>
										<a href="javascript:;" class="keyword-search-keyword keyword-search-grade"  data-id="<?=$grade['id']?>"><?=$grade['grade_name']?></a>
									<?php endforeach; ?>
								<?php endif ?>
							</div>
						</div>
						<div class="form-inline keyword-search-div" id="div-normal-class">
							<label class="keyword-search-label">行政班&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="keyword-search-box">
								<a href="javascript:;" class="keyword-search-keyword keyword-search-normal-class active" data-id="">全部</a>
							</div>
						</div>
					<?php else: ?>	
					<!-- 教师权限 -->
					<div class="form-inline keyword-search-div" id="div-normal-class">
							<label class="keyword-search-label">班级&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="keyword-search-box div-classes">
								<a href="javascript:;" class="keyword-search-keyword keyword-search-class active" data-id="">全部</a>
								<?php foreach($rmxUser['classArr'] as $class): ?>
									<a href="javascript:;" class="keyword-search-keyword keyword-search-class" data-id="<?=$class['id']?>"><?=$class['name']?></a>
								<?php endforeach; ?>
							</div>
						</div>
					<?php endif ?>
					<div class="form-inline keyword-search-div" id="div-symptom">
						<label class="keyword-search-label">出现症状</label>
						<div class="keyword-search-box">
							<a href="javascript:;" class="keyword-search-keyword active" data-id="">全部</a>
							<?php foreach($this->healthData['symptom'] as $key => $value): ?>
								<a href="javascript:;" class="keyword-search-keyword" data-id="<?= $key ?>"><?= $value ?></a>
							<?php endforeach ?>
						</div>
					</div>
					<div class="form-inline keyword-search-div" id="div-current-status">
						<label class="keyword-search-label">目前状态</label>
						<div class="keyword-search-box">
							<a href="javascript:;" class="keyword-search-keyword active" data-id="">全部</a>
							<?php foreach($this->healthData['current_status'] as $key => $value): ?>
								<a href="javascript:;" class="keyword-search-keyword" data-id="<?= $key ?>"><?= $value ?></a>
							<?php endforeach ?>
						</div>
					</div>
					<div class="form-inline keyword-search-div" id="div-family-status">
						<label class="keyword-search-label">家属状态</label>
						<div class="keyword-search-box">
							<a href="javascript:;" class="keyword-search-keyword active" data-id="">全部</a>
							<?php foreach($this->healthData['family_status'] as $key => $value): ?>
								<a href="javascript:;" class="keyword-search-keyword" data-id="<?= $key ?>"><?= $value ?></a>
							<?php endforeach ?>
						</div>
					</div>
					<div class="form-inline keyword-search-div" id="div-treatment">
						<label class="keyword-search-label">诊疗情况</label>
						<div class="keyword-search-box">
							<a href="javascript:;" class="keyword-search-keyword active" data-id="">全部</a>
							<?php foreach($this->healthData['treatment'] as $key => $value): ?>
								<a href="javascript:;" class="keyword-search-keyword" data-id="<?= $key ?>"><?= $value ?></a>
							<?php endforeach ?>
						</div>
					</div>
					<div class="form-inline keyword-search-div" id="div-is-contact">
						<label class="keyword-search-label">是否密切接触&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<div class="keyword-search-box">
							<a href="javascript:;" class="keyword-search-keyword active" data-id="">全部</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="1">是</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="0">否</a>
						</div>
					</div>
					<div class="form-inline keyword-search-div" id="div-is-return">
						<label class="keyword-search-label">是否往返武汉及毗邻地区</label>
						<div class="keyword-search-box">
							<a href="javascript:;" class="keyword-search-keyword active" data-id="">全部</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="1">是</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="0">否</a>
						</div>
					</div>
					<div class="form-inline keyword-search-div" id="div-is-detained">
						<label class="keyword-search-label">是否滞留在湖北地区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<div class="keyword-search-box">
							<a href="javascript:;" class="keyword-search-keyword active" data-id="">全部</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="1">是</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="0">否</a>
						</div>
					</div>
					<div class="form-inline keyword-search-div" id="div-createtime">
						<label class="keyword-search-label">创建日期</label>
						<div class="keyword-search-box">
							<!-- <div class="work-div">
								<div id="work-calendar" class="work-calendar">全部</div>
								<div class="rec"></div>
							</div> -->
							<div class="div-date-picker">
								<input class="form-control" type="text" id="date-picker" name="createdate" value=""/>
								<i class="fa fa-calendar"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="col-xs-12">
	<!-- 学校表格 -->
	<table id="dynamic-table" class="table table-striped table-bordered table-hover mt10">
		<thead>
			<tr>
				<th>用户名称</th>
				<th width="74px;">角色</th>
				<th>就读/任课班级</th>
				<th>联系电话</th>
				<th>目前状态</th>
				<th>家属状态</th>
				<th>诊疗情况</th>
				<th>症状</th>
				<th width="74px;">密切接触</th>
				<th width="74px;">往返武汉及毗邻地区</th>
				<th width="74px;">滞留在湖北地区</th>
				<th>假期去向</th>
				<th>详情地址</th>
				<th width="80x;">创建时间</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>

<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script src="<?= $staticAdminUrl ?>assets/laydate/laydate.js"></script>
<script type="text/javascript">
	var schoolId = 0;
	// 班级数据
	var normalClassJson = <?= $gradeNormalClassList ?>;
	$(function(){
		var table = $('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('school/get_health_list')?>',
			"columns": [
				{"data": "realname"},
				{"data": "bindUserType"},
				{"data": "class_names"},
				{"data": "mobile"},
	            {"data": "current_status"},
				{"data": "family_status"},
				{"data": "treatment"},
	            {"data": "symptom"},
				{"data": "is_contact"},
				{"data": "is_return"},
				{"data": "is_detained"},
				{"data": "holiday_dest"},
				{"data": "holiday_dest_desc"},
	            {"data": "createtime"},
			]
		});

		// 内容筛选
		$("#data-search-btn").click(function(){
			search(table);
		})
		// 年级班级联动
		$("#data-search-grade").change(function(){
			var gradeId = $(this).val();
			var classSelect = $("#data-search-class");
			var teachSelect = $("#data-search-teach");
			var getUrl = "<?=admin_url('school/get_class_list')?>/" + gradeId;
			ajax_get(getUrl, {hideLoading: true}, function(res){
				var optionHtml = "";
				classSelect.html('<option value="">全部班级</option>');
				teachSelect.html('<option value="">全部班级</option>');

				for(var i in res.data) {
					var classData = res.data[i];
					if(classData.class_type == '<?=CLASSES_TYPE_NORMAL?>') classSelect.append('<option value="'+ classData.id +'">'+ classData.class_name +'</option>');
					if(classData.class_type == '<?=CLASSES_TYPE_TEACHING?>') teachSelect.append('<option value="'+ classData.id +'">'+ classData.class_name +'</option>');
				}
			})
		})
		// 点击关键字
		$("body").on("click", ".keyword-search-keyword", function(){
			var id = $(this).data("id");
			// 高亮当前点击对象
			$(this).parent().find(".keyword-search-keyword").removeClass("active");
			$(this).addClass("active");
			// 如果是点击年级
			if($(this).hasClass("keyword-search-grade")) {
				// 先清空班级列表
				$(".keyword-search-normal-class:gt(0)").remove();
				// 获取班级列表
				var normalClassList = normalClassJson[id];
				for(var i in normalClassList) $(".keyword-search-normal-class:first").parent().append('<a href="javascript:;" class="keyword-search-keyword keyword-search-normal-class" data-id="'+ normalClassList[i].id +'">'+ normalClassList[i].name +'</a>');
				// 选中全部班级
				var realname = $("[name=realname]").val();
				var gradeId = $("#div-grade .active").data("id");
				search(table);
			} else {
				search(table);
			}
		});
		// 敲回车就搜索
		$("[name=realname]").keypress(function (e) {
                if (e.which == 13) {
                    $("#btn-search").trigger("click");
                }
		});
		// 清空搜索框
		$("[name=realname]").keyup(function() {
			if($(this).val().length > 0) {
				$("#empty-search").show();
				$("#empty-search").click(function(){
					$("[name=realname]").val('');
					$(this).hide();
					// 重置搜索结果
					search(table);
				})
			} else {
				$("#empty-search").hide();
			}
		}); 
		// 搜索标题
		$("#btn-search").click(function() {
			search(table);
		});

		$("#work-calendar").click(function() {
			if($(this).text() == '全部') {
				//执行一个laydate实例
				var chooseDate = getNowDate();
				var today = getNowDate();
				//设置作业时间区间开始为前6天
				var sixDayBefore = getBeforeSixDate();
				var rangeDate = sixDayBefore + ' - ' + today;
				laydate.render({
					elem: '#work-calendar', //指定元素
					value: rangeDate,
					range: true,
					max: today,
					btns: ['confirm'],
					done: function(value) {
						search(table, value);
					}
				});
				search(table);
			}
		});
		// 监听创建时间变化
		$("[name=createdate]").blur(function() {
			search(table);
		});
		$(".export").click(function() {
			var timeStr = $("#work-calendar").text();
			var timeArr = [];
			var beginTime = '';
			var endTime = '';
			if(timeStr.indexOf(" - ") != -1) {
				timeArr = timeStr.split(" - ");
				beginTime = timeArr[0] + ' 00:00:00';
				endTime = timeArr[1] + ' 23:59:59';
			}
			var params = {
				"grade_id": $("#div-grade .active").data('id'),
				"class_id": $("#div-normal-class .active").data('id'),
				"keyword": $("[name=realname]").val(),
				"bindusertype": $("#div-bindusertype .active").data('id'),
				"is_contact": $("#div-is-contact .active").data('id'),
				"is_return": $("#div-is-return .active").data('id'),
				"is_detained": $("#div-is-detained .active").data('id'),
				"current_status": $("#div-current-status .active").data('id'),
				"family_status": $("#div-family-status .active").data('id'),
				"symptom": $("#div-symptom .active").data('id'),
				"treatment": $("#div-treatment .active").data('id'),
				"begin_time": beginTime,
				"end_time": endTime,
				'createdate': $("[name=createdate]").val()
			};
			var str = '?'; 
			for(let i in params) {
				str += i + "=" + params[i] + "&";
			}
			var url = "<?= admin_url('school/export_health') ?>" + str;
			window.location.href = url;
		});
		$('#date-picker').datetimepicker({
			format: 'YYYY-MM-DD',
			maxDate: "<?= date('Y-m-d') ?>",
		});
		// 点击日期图标触发点击日期input
		$(".fa-calendar").click(function() {
			$('#date-picker').focus();
		});
	})
	//获取当天日期
	function getNowDate() {
		var date = new Date();
		$res = formatDate(date);
		return $res;
	}
	function formatDate(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var dateFormat = year + "-" + month + "-" + day;
        return dateFormat;
	}
	function getBeforeSixDate() {
        var date = new Date(); //获取今天日期
        date.setDate(date.getDate() - 6);
        $res = formatDate(date);
        return $res;
	}
	function search(table, timeStr='') {
		if(timeStr == '') {
			timeStr = $("#work-calendar").text();
		}
		var timeArr = [];
		var beginTime = '';
		var endTime = '';
		if(timeStr.indexOf(" - ") != -1) {
			timeArr = timeStr.split(" - ");
			beginTime = timeArr[0] + ' 00:00:00';
			endTime = timeArr[1] + ' 23:59:59';
		}

		table.setAjaxData({
			"grade_id": $("#div-grade .active").data('id'),
			"class_id": $("#div-normal-class .active").data('id'),
			"keyword": $("[name=realname]").val(),
			"bindusertype": $("#div-bindusertype .active").data('id'),
			"is_contact": $("#div-is-contact .active").data('id'),
			"is_return": $("#div-is-return .active").data('id'),
			"is_detained": $("#div-is-detained .active").data('id'),
			"current_status": $("#div-current-status .active").data('id'),
			"family_status": $("#div-family-status .active").data('id'),
			"symptom": $("#div-symptom .active").data('id'),
			"treatment": $("#div-treatment .active").data('id'),
			"begin_time": beginTime,
			"end_time": endTime,
			'createdate': $("[name=createdate]").val()
		});
	}

</script>